<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .operation {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 220px;
        padding: 12px;
        box-sizing: border-box;
        background: #80808040;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
      }

      .waterfall {
        margin: 0 auto 0 220px;
        padding: 30px;
        counter-reset: count;
      }

      .waterfall > .item {
        position: relative;
        padding: 12px;
        border-radius: 6px;
        background-color: #80808020;
        font-size: 2em;
      }

      .waterfall > .item::before {
        content: counter(count);
      }
    </style>
  </head>
  <body>
    <div class="operation">
      <h2>Props</h2>

      <p>gap <input id="gap-range" type="range" value="10" /></p>

      <p>
        cols
        <input id="cols-range" type="range" value="5" min="1" max="6" />
      </p>

      <p><button id="add">Add</button></p>

      <p><button id="add100">Add 100 items</button></p>
    </div>

    <div class="waterfall">
      <div class="item"></div>
    </div>

    <script>
      const createItem = async (w, h) => {
        const e = document.createElement("div");
        e.style.width = `${w}px`;
        e.style.height = `${h}px`;
        return e;
      };
    </script>
    <script>
      let gap = 10,
        cols = 5;
      document.querySelector("#gap-range").addEventListener("input", (e) => {
        gap = +e.target.value;
      });
      document.querySelector("#cols-range").addEventListener("input", (e) => {
        cols = +e.target.value;
      });
    </script>
  </body>
</html>
